<template>
  <div class="search-input">
    <!-- 搜索图标 -->
    <i class="seaicon"></i>
    <!-- 输入框 -->
    <input
      class="search"
      @keyup.enter="search"
      v-model="searchValue"
      type="text"
      placeholder="搜索歌曲、歌手、专辑"
    />
    <!-- 点击取消本次搜索 -->
    <div class="close" @click="closeClick">
      <i class="closeicon" :class="{showClose:showClose}"></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
    };
  },
  computed: {
    showClose() {
      if (this.searchValue != "") {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    // 取消搜索
    closeClick() {
      this.searchValue = "";
    },
    // 回车搜索
    search() {
      if (this.searchValue != "") {
        this.$emit("search", this.searchValue);
      }
    },
  },
};
</script>

<style scoped>
.search-input {
  position: relative;
  width: 100%;
  height: 30px;
  padding: 0 30px;
  box-sizing: border-box;
  background: #ebecec;
  border-radius: 30px;
}
.seaicon {
  position: absolute;
  top: 9px;
  left: 8px;
  vertical-align: middle;
  width: 13px;
  height: 13px;
  background-image: url("");
  display: inline-block;
  background-position: 0 0;
  background-size: contain;
  background-repeat: no-repeat;
}
.search {
  width: 100%;
  height: 30px;
  line-height: 18px;
  background: rgba(0, 0, 0, 0);
  font-size: 14px;
  color: #333;
  border: 0;
  border-radius: 0;
  outline: 0;
}
.close {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
}
.closeicon {
  vertical-align: middle;
  display: none;
  width: 14px;
  height: 14px;
  background-image: url("");
  background-position: 0 0;
  background-size: contain;
  background-repeat: no-repeat;
}
.showClose {
  display: inline-block;
}
</style>